

<?php $__env->startSection('title','个人中心'); ?>

<?php $__env->startSection('css'); ?>
    <link rel="stylesheet" href="<?php echo e(asset('/lib/zoomify/zoomify.css')); ?>">
    <style type="text/css">
        /*@main=#d79705*/
        /*@dan=#dec07a*/
        body{background-color: #f0eff6}
        /*抖动*/
        .shake{
            /*-webkit-animation-name: shake_box;
            -ms-animation-name: shake_box;
            animation-name: shake_box;
            -webkit-animation-duration: 100ms;
            -ms-animation-duration: 100ms;
            animation-duration: 100ms;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;*/
        }
        @keyframes  shake_box{
            0% {transform: translate(0px, 0px) rotate(0deg)}
            20% {transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
            40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
        }
        @-ms-keyframes shake_box{
            0% {-ms-transform: translate(0px, 0px) rotate(0deg)}
            20% {-ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
            40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
        }
        canvas{
            width: 100px;
            height: 100px;
        }
        /*会员卡等级部分普通：深：454955 浅色：7e859b 银：深色：#99a1ae   浅色：#d3d6db 金：深色：b69562    浅色：dec99c*/
        .center-card{
            /*background-image: url("/back.png");*/
            /*height: 200px;*/
            background: -webkit-linear-gradient(left top, #7e859b , #454955); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #7e859b, #454955); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #7e859b, #454955); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #7e859b , #454955); /* 标准的语法（必须放在最后） */
            text-align: center;
            color: #fff;
            font-size: 12px;
            padding-top: 20px;
        }
        .process{
            overflow-x: scroll;
            /*color:#EFEFEF;*/
            font-weight: lighter;
            padding: 5% 0 25% 0;
        }
        .process::-webkit-scrollbar {
            display:none
        }
        .line{
            margin-top: 10%;
            width: 190%;
            height: 0.5rem;
            background-color: #616568;
        }
        .ng{
            height: 0.5rem;
            width: 10%;
            background-color: #E9EDED;
        }

        .rank{
            height: 40px;
            text-align: center;
            margin-top: -6%;
        }
        .rank .active{
            font-size: 14px;
            font-weight: 800;
        }
        .rank-div{
            width: 66%;
            height: 6rem;
            /*background-color: #ddd;*/
            margin: 0 auto;
        }
        .rank-radius{
            width: 50px;
            height: 50px;
            border-radius: 110%;
            margin: 0 auto;
            margin-bottom: 15%;
        }
        .rank-p{
            margin-top: 5px;
        }
        .center-card>p{
            margin-top: 0.5rem;
            margin-bottom: 10px;
        }
        #clock{
            font-size: 10px;
            width: 61px;
            height: 22px;
            border: 1px solid #fff;
            border-radius: 4px;
            background-color: rgba(255,255,255,0);
            margin: 3% 0;
            color: #fff;
        }

        /*tap区*/
        .center-tap{
            background-color: #fff;
            text-align: center;
            padding: 2.5% 0;
            border-bottom: 1px solid #f0eff6;
        }
        .center-tap1,.center-tap3,.center-tap2{
            height: 2rem;
            line-height: 2rem;
            display: inline-block;
            width: 32%;
            border:none;
            text-align: center;
            font-size: 14px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .center-tap2{
            width: 32%;
            border-left: 0.5px solid #f0eff6;
            border-right: 0.5px solid #f0eff6;
        }
        .center-tap1 span{
            color: #d79705;
            font-size: 16px;
        }
        /*二维码*/
        .center-qrcode{
            background-color: #fff;
            text-align: center;
            min-height: 128px;
        }

        /*会员权益*/
        .center-prower{
            background-color: #fff;
            font-size: 16px;
            overflow: hidden;
            border-bottom: 5px solid #f0eff6;
        }
        .sm-4 {
            width: 25%;
            float: left;
            text-align: center;
            margin-top: 10px;
            word-wrap:break-word;
            overflow: hidden;
            height: 75px;
        }
        .prerogative_logo{
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }
        .prerogative_name,.prerogative_content{
            margin-top: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .prerogative_content{
            color: #f0eff6;
            font-size: 12px;
        }
        .center-bottom{
            background-color: #fff;
            overflow: hidden;
            border-top: 1px solid #f0eff6;
            font-size: 14px;
            padding: 10px 20px;
        }
        .bottom-button{
            color: #d79705;
            width: 4.5rem;
            height: 21px;
            border: 1px solid #d79705;
            float: right;
            font-size: 12px;
            background-color: #fff;
            text-align: center;
            line-height: 21px;
        }
        .bottom-text{
            line-height: 21px;
        }
        .tap-icon{
            width: 14px;
            vertical-align: middle;
            display: inline-block;
            margin-right: 5px;
            padding-bottom: 4px;
        }
        .center-prower>.weui-flex{
            margin-top: 10%;
        }
        .power-top{
            padding: 10px 20px;
        }
        .power-title{
            font-size: 18px;
            font-weight: bold;
        }
        .power-des{
            float: right;
            font-size: 12px;
        }
        #center-qrcode img{
            width: 170px;
            height: 170px;
            margin: 0 auto;
        }
        a:active,.bottom-button:active{
            color: #dec07a;
        }

        .center-tap, .weui-cell__ft{
            position: relative;
        }
        .weui-cell__ft:after{
            content: " ";
            display: inline-block;
            height: 6px;
            width: 6px;
            border-width: 0px 1px 1px 0px;
            border-color: #A1A1A1;
            border-style: solid;
            -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 50%;
            margin-top: -4px;
            left: 7px;
        }
        .weui-cell__ft.active:after{
            border-width: 1px 0px 0px 1px;
            top: 12px;
        }
        .center-tap-active:after, .center-tap-active:before{
            left: 47%;
            pointer-events: none;
            border-bottom-style: solid;
            border-width: 0 8px 8px;
            position: absolute;
            display: block;
            content: "";
            width: 0;
            height: 0;
            border: 8px dashed transparent;
            z-index: 1;
        }
        .center-tap-active:after{
            border-bottom-color: #ddd;
            bottom: -1px;
        }
        .center-tap-active:before{
            border-bottom-color: #fff;
            z-index: 99999;
            bottom: -2px;
        }
        .center-tap a, .center-tap1, .center-tap2{
            color:#A1A1A1;
        }
        .barcodeimg{
            margin: 30px;
            text-align: center;
            background: #fff;
        }
        /*头部进度*/
        .card_process{
            margin: 0 auto;
            padding: 10px;
            margin-top: -10px;
            position: relative;
            font-size: 12px;
            padding-bottom: 44px;
        }
        .card_process_1{
            /*background-color: #9298A5;*/
        }
        .card_process_2{
            /*background-color: #454955;*/
        }
        .card_process_3{
            /*background-color: #493F34;*/
        }
        .process_drak{
            width: 270px;
            height: 4px;
            background-color: #828898;
            margin: 0 auto;
            margin-top: 20px;
        }
        .process_light{
            width: 1px;
            height: 100%;
            background-color: #EBBA39;
        }
        /*.process_rank{
            text-align: center;
        }*/
        .process_rank_2{
            margin: 0 auto;
        }
        .process_rank-radius{
            width: 15px;
            height: 15px;
            background-color: #828898;
            border-radius: 30px;
            margin-top: -9.5px;
        }
        .process_rank>p{
            margin-top: 10px;
        }
        .active_pass{
            background-color: #fff;
        }
        .process_rank-radius.active{
            background-color: #EBBA39;
            /*box-shadow: 1px 1px 12px 3px #d0d0d0;*/
        }
        /*.process_rank_2.active{
            background: -webkit-linear-gradient(left top, #ADAFBB , #D9DBE0); !* Safari 5.1 - 6.0 *!
            background: -o-linear-gradient(bottom right, #ADAFBB, #D9DBE0); !* Opera 11.1 - 12.0 *!
            background: -moz-linear-gradient(bottom right, #ADAFBB, #D9DBE0); !* Firefox 3.6 - 15 *!
            background: linear-gradient(to bottom right, #ADAFBB , #D9DBE0); !* 标准的语法（必须放在最后） *!
            box-shadow: 1px 1px 12px 3px #CACCD3;
        }
        .process_rank_3.active{
            background: -webkit-linear-gradient(left top, #D8BB84 , #C0A36D); !* Safari 5.1 - 6.0 *!
            background: -o-linear-gradient(bottom right, #D8BB84, #C0A36D); !* Opera 11.1 - 12.0 *!
            background: -moz-linear-gradient(bottom right, #D8BB84, #C0A36D); !* Firefox 3.6 - 15 *!
            background: linear-gradient(to bottom right, #D8BB84 , #C0A36D); !* 标准的语法（必须放在最后） *!
            box-shadow: 1px 1px 12px 3px #CACCD3;
        }*/
        .weui-grid__icon img{
            display: inline-block;
            vertical-align: middle;
        }
        .prerogative_logo.weui-grid__icon.icon_power_3 img{
            height: 77%;
        }
        .prerogative_logo.weui-grid__icon.icon_power_6 img{
            width: 90%;
        }
        .prerogative_logo.weui-grid__icon.icon_power_4 img{
            height: 90%;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('container'); ?>
    <div class="app">
        <div class="center-card">
            
            <div class="card_process card_process_<?php echo e($mycard->id_mcard_level); ?>">
                <div class="process_drak">
                    <div class="process_light"></div>

                    <div class="weui-flex">

                        <div class="process_rank am-u-sm-4 weui-flex__item" style="text-align: left">
                            <div class="process_rank-radius process_rank_1 active" style="margin-left: -1px"></div>
                            <p style="margin-left: -5px">贵宾卡</p>
                        </div>

                        <div class="process_rank am-u-sm-4 weui-flex__item">
                            <div class="process_rank-radius process_rank_2"></div>
                            <p>银卡</p>
                        </div>

                        <div class="process_rank am-u-sm-4 weui-flex__item" style="text-align: right">
                            <div class="process_rank-radius process_rank_3" style="float: right"></div>
                            <div class="clear"></div>
                            <p style="margin-right: -1px">金卡</p>
                        </div>

                    </div>
                </div>
            </div>
            <p><span>我的积分：<?php echo e($mycard->remain_credits); ?></span></p>
            <button id="clock" onclick="window.location.href='user/punch-clock'" >打卡</button>
        </div>
        
        <div class="center-tap">
            <div class="center-tap1">
                <a href="<?php echo e(route('uwallet')); ?>">
                    <img class="tap-icon" src="<?php echo e(asset('/images/qianbao.png')); ?>" alt="">电子钱包
                </a>
            </div>

            <div class="center-tap2">
                <img class="tap-icon" src="<?php echo e(asset('/images/icon_member_recode.png')); ?>" alt="">会员码 <span style="font-size: 18px;color: #fff" class="weui-cell__ft">^</span>
            </div>

            <div class="center-tap3">
                <a href="<?php echo e(route('ogift')); ?>">
                    <img class="tap-icon" src="<?php echo e(asset('/images/liping.png')); ?>" alt="">I礼品卡区
                </a>
            </div>
        </div>

        <div class="tab-1" style="display: none">
            
            <div class="barcodeimg">
                <img src="data:image/png;base64,<?php echo e(\DNS1D::getBarcodePNG($mycard->card_no, "C128",2,50)); ?>" alt="barcode"   />
            </div>
            <div class="center-qrcode" id="center-qrcode">

            </div>
        </div>
        <div class="tap-2">
            
            <div class="center-prower">

                <div class="power-top">
                    <span class="power-title">会员特权</span>
                    <a class="power-des" href="<?php echo e(route('powerExplain')); ?>">权益说明 ></a>
                </div>

                <div>
                    <?php $__currentLoopData = $mycard_prerogative; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a class="sm-4" href="<?php echo e(route('prowerDetail',['id'=>$item->id_wxcard_prerogative])); ?>">
                            <div class="prerogative_logo weui-grid__icon icon_power_<?php echo e($item->prerogative->type); ?>" >
                                <img src="/images/version1/icon_power_<?php echo e($item->prerogative->type); ?>.png" alt="">
                            </div>
                            <div class="prerogative_name weui-grid__label"><?php echo e($item->name); ?></div>
                            <div class="prerogative_content .weui-grid__label"><?php echo e($item->brief); ?></div>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

            </div>

            <div class="center-bottom">
                <span class="bottom-text">个人信息</span>
                <a class="bottom-button" href='<?php echo e(url("user/edit")); ?>'>编辑</a>
            </div>

            <div class="center-bottom">
                <span class="bottom-text">订单详情</span>
                <a class="bottom-button" href="<?php echo e(route('oList')); ?>">查看</a>
            </div>

            <div class="center-bottom">
                <span class="bottom-text">积分兑换</span>
                <a href="<?php echo e(route('oExchange')); ?>" class="bottom-button">兑换</a>
            </div>

            <div class="center-bottom" >
                <span class="bottom-text">我的卡券</span>
                <a href="<?php echo e(route('uTicktes')); ?>" class="bottom-button">查看</a>
            </div>

            <div class="center-bottom" style="margin-bottom: 5rem">
                <span class="bottom-text">积分详情</span>
                <a href="<?php echo e(route('ucredits')); ?>" class="bottom-button">详情</a>
            </div>
        </div>

    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>

    <script type="text/javascript" src="<?php echo e(asset('js/qrcode.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('lib/zoomify/zoomify.js')); ?>"></script>
    <script>
        var qrcode = new QRCode("center-qrcode");
        // 获取消费二维码
        function getConsumeQrcode()
        {
            $.ajax({
                url:'/ajax/getConsumeCode',
                type:'post',
                data:{'_token':window.laravel_csrf_token},
                dataType:'json',
                success:function(res){
                    if(res.code==200){
                        //js生成二维码
                        qrcode.makeCode(res.msg);
                        //会员码放大
                        $('#center-qrcode img').zoomify();
                    } else{
                        showMsg(res.msg);
                    }
                    return ;
                }
            });
        }
    </script>

    <script>
        $(function(){
            //ios返回不刷新问题
            var isPageHide = false;
            window.addEventListener('pageshow', function () {
                if (isPageHide) {
                    window.location.reload();
                }
            });
            window.addEventListener('pagehide', function () {
                isPageHide = true;
            });
            //会员码
            getConsumeQrcode();
            setInterval("getConsumeQrcode()",10000);

            //会员码显示与..
            $('.center-tap2').click(function(){
                if($('.center-tap').hasClass('center-tap-active')){
                    $('.tab-1').hide();
                    $('html,.app').css('background','#f0eff6');
                    $('.tap-2').show();
                    $('.center-tap').removeClass('center-tap-active');
                    $('.weui-cell__ft').removeClass('active');
                }else{
                    $('.tab-1').show();
                    $('html,.app').css('background','#fff');
                    $('.tap-2').hide();
                    $('.center-tap').addClass('center-tap-active');
                    $('.weui-cell__ft').addClass('active');
                }
            });

            $('.box').click(function () {
                $(this).addClass('shake');
            });


            var card_level = "<?php echo e($mycard->id_mcard_level); ?>";

            var dom_level = $('.rank'+card_level);

            // var set = dom_level.offset().left-$(window).width()/2;
            // 挪动效果
            // 进度条动态
            //var process1 = '35%',process2='54%',process3='100%';
            
            /*$(".process").animate({ scrollLeft: (dom_level.offset().left-$(window).width()/2+25) }, 1000);

            setTimeout(function () {
                dom_level.animate({'width':'70','height':'70px','margin-top':'-8%','margin-bottom':'10%'},800);
                dom_level.addClass('shake');
                if(parseInt(card_level)>1){
                    dom_level.css('background-image','url("/images/level'+card_level+'_active.png")');
                }
                // 移除抖动
                setTimeout(function () {
                    dom_level.removeClass('shake');
                },800)
            },1000);*/
            if(card_level>1){
                $('.process_rank_1').addClass('active');
            }
            if(card_level>2){
                $('.process_rank_2').addClass('active');
            }

            $('.process_rank_'+card_level).addClass('active');

            $(".process_light").animate({ width:"<?php echo e($mycard->progress); ?>"},1000);

            // $('.process_rank_'+card_level).animate({ width:"30px",height:'30px'},1000);
            // $('.process_rank_'+card_level).parent().find('p').css('margin-top','5px');

            //图片加载失败
            $(".weui-grid__icon img").each(function() {

                var img = $(this);

                img.error(function() {
                    console.log('omg2');
                    img.attr('src','images/zlogo.png');
                });
            });
        });

    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts._main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>